'use strict';

/* console.log(document.querySelector('.message').textContent);

document.querySelector('.message').textContent = 'Good Number!';
console.log(document.querySelector('.guess').value);
document.querySelector('.guess').value =20; */

//生成随机数，因为每次设定的guess是随机而且固定的
let number = Math.floor(Math.random() * 20 + 1);
//初始分数
let score =20;
let highScore = 0;
const displayMessage = function(message){
    document.querySelector('.message').textContent=message;
}

/*给check所在的button标签添加监听事件，第一个参数是监听的类型-'click'点击事件，
第二个参数则为触发的操作
 */
document.querySelector('.check').addEventListener('click', function () {
    const guess = Number(document.querySelector('.guess').value);

    console.log(guess);
    if (guess === 0) {
        displayMessage('No number!')
        
    }else if(guess === number){
       displayMessage('Correct Number!');
        document.querySelector('.number').textContent = number;
        if(highScore <score){
            highScore=score;
            document.querySelector('.highscore').textContent = highScore;
        }
        //操作样式
        document.querySelector('body').style.backgroundColor = '#60b347';
        document.querySelector('.number').style.width = '30rem';
    }else if(guess!==number){
        if(score>1){
            if(guess>number){
            displayMessage('too high!');
            }else if(guess<number){
                displayMessage('too low!');
            }
            score--;
            document.querySelector('.score').textContent =score;
        }
        else{
            displayMessage('You lost the game!');
            //解决，已经输了，但是score还是显示1的问题。
            document.querySelector('.score').textContent =0;
        }
    }
    
});

document.querySelector('.again').addEventListener('click',function(){
    
    score =20;//真实的值也要恢复
    document.querySelector('.score').textContent = score;
    document.querySelector('.guess').value = null;
    document.querySelector('.number').textContent = '?';
    number = Math.floor(Math.random() * 20 + 1);
    
    document.querySelector('.message').textContent = 'Start guessing...';
    document.querySelector('body').style.backgroundColor='#222';
    document.querySelector('.number').styele.width = '15rem';

})